import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import data from './staticData'
import BasicSetting from './BasicSetting'

Vue.use(Vuex)

const GLOBAL_MODULE = {
  state: {
    loginUser: null,
    colorStyle: 1, // 1：深色模式 2：浅色模式
    menuStyle: BasicSetting.menuStyle
  },
  mutations: {
    login: (state, userName) => {
      state.loginUser = {
        name: userName
      }
    },
    logout: (state) => {
      state.loginUser = null
    },
    changeColorStyle: (state) => {
      state.colorStyle = state.colorStyle === 1 ? 2 : 1
    }
  }
}

// 如果 namespaced 为 true
// this.$store.commit('modules?/xxx')
// this.$store.dispatch('modules?/xxx')
const BACK_MODULE = {
  namespaced: true,
  state: {
    menuList: data.menuList,
    breadcrumbList: []
  },
  mutations: {
    initBreadcrumbList: (state, list) => {
      state.breadcrumbList = list
    }
  }
}

const store = new Vuex.Store({
  modules: {
    global: GLOBAL_MODULE,
    back: BACK_MODULE
  },
  // 使用插件 persistedstate 解决刷新vuex数据丢失问题 npm install vuex-persistedstate --save
  // plugins: [createPersistedState()]
  // 可指定存储模块
  plugins: [createPersistedState({
    storage: window.sessionStorage
  })]
})

export default store
